/*
 * @Author: kanglang
 * @Date: 2020-12-09 14:25:51
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-07-21 14:12:03
 * @Description: 用户反馈--图片部分
 */
import React, { Fragment } from 'react';
import { StyleSheet, Image, TouchableOpacity, View, Text } from 'react-native';
import { px2dp, screenWidth } from '@/styles';
import { iconCamera } from '@/images';
import baseConfig from '@/config/baseConfig';

const { fileUrl } = baseConfig;

const PictureBox = ({ uploadImage, delImage, imageList }) => {
  const addImage = () => {
    uploadImage();
  };

  const delCurrentImg = (index) => {
    delImage(index);
  };

  return (
    <>
      <View style={styles.container}>
        {
          imageList.length > 0 &&
          imageList.map((item, index) => {
            return (
              <Fragment key={index}>
                <View key={index} style={styles.imageItem}>
                  <Image
                    style={styles.showImg}
                    source={{ uri: fileUrl + item }}
                    resizeMode='stretch'
                  />
                  <TouchableOpacity style={styles.delBtnStyle} onPress={() => delCurrentImg(index)}>
                    <Text style={styles.imageDel}>删除</Text>
                  </TouchableOpacity>
                </View>
                {
                  index % 4 !== 3 && <View style={styles.marginView} />
                }
              </Fragment>
            );
          })
        }
        {
          imageList.length < 6 &&
          <TouchableOpacity
            style={styles.uploads}
            onPress={addImage}
            opacity={0.8}
          >
            <Image
              style={styles.addImg}
              resizeMode='contain'
              source={iconCamera}
            />
          </TouchableOpacity>
        }
      </View>
      <View style={styles.bottomLine} />
    </>
  );
};
export default PictureBox;
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#FFFFFF',
    flexDirection: 'row',
    flexWrap: 'wrap',
    padding: px2dp(32),
    justifyContent: 'flex-start',
  },
  uploads: {
    width: px2dp(160),
    height: px2dp(160),
    backgroundColor: '#F5F5F5',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 6
  },
  addImg: {
    width: px2dp(68),
    height: px2dp(68)
  },
  imageItem: {
    borderRadius: 6,
    width: px2dp(160),
    height: px2dp(160),
    marginBottom: px2dp(20)
  },
  showImg: {
    borderRadius: 6,
    width: px2dp(160),
    height: px2dp(160),
  },
  delBtnStyle: {
    width: '100%',
    height: px2dp(42),
    position: 'absolute',
    bottom: 0,
  },
  imageDel: {
    width: '100%',
    height: px2dp(42),
    color: '#FFFFFF',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    position: 'absolute',
    bottom: 0,
    textAlign: 'center',
    // borderBottomLeftRadius: 6,
    // borderBottomRightRadius: 6
  },
  marginView: {
    height: px2dp(160),
    width: (screenWidth - 4 * px2dp(160) - 2 * px2dp(32)) / 3
  },
  bottomLine: {
    width: screenWidth - 2 * px2dp(32),
    left: px2dp(32),
    backgroundColor: '#F0EFEF',
    height: px2dp(1),
  }

});
